<template>
	<view class="page">
		<view class="logo" style="background-color: #fff;">
			<image class="logo-image" src="../../static/images/gjnyt_logo.png" mode="widthFix"></image>
		</view>

		<swiper class="swiper-box" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"
			circular="true">
			<swiper-item v-for="item in imgSrcList" :key="item.id">
				<image class="swiper-image" :src="item.url" mode="widthFix"></image>
			</swiper-item>
		</swiper>

		<swiper class="swiper" :autoplay="false" :interval="5000" :duration="500">
			<swiper-item class="swiper-item" v-for="(group, index) in supplierGroups" :key="index">
				<view class="group">
					<view v-for="(merchant, subIndex) in group" :key="subIndex" class="merchant-item">
						<view class="merchant-info">
							<image :src="merchant.avatarImage" class="logo" @click="enteringStore(merchant.tele)"></image>
							<text>{{ merchant.companyName }}</text>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>

		<div class="daily_recommendations">
			<div class="recommendations">每日推荐</div>
			<div class="right" @click="goto('/pages/commodity/commodity')">
				更多 <svg t="1711618179719" class="icon" viewBox="0 0 1024 1024" version="1.1"
					xmlns="http://www.w3.org/2000/svg" p-id="2155" width="10" height="10">
					<path
						d="M341.957209 959.354678c-12.893658 0-25.842575-4.425799-36.386722-13.467733-23.493064-20.10592-26.224268-55.426357-6.064113-78.891791L603.929736 511.789199l-304.423361-355.206978c-20.160155-23.465434-17.427928-58.786894 6.064113-78.891791 23.437805-20.024056 58.786894-17.373693 78.837556 6.064113l335.675132 391.620305c17.974373 20.952194 17.974373 51.875484 0 72.827679l-335.675132 391.620305C373.371686 952.717514 357.691565 959.354678 341.957209 959.354678z"
						p-id="2156"></path>
				</svg>
				</svg>
				</svg>
			</div>
		</div>

		<div v-for="commodity in commodityList" :key="commodity.id" class="main-box">
			<u-row gutter="16">
				<u-col span="4">
					<image :src="commodity.image1" alt="product image" mode="aspectFit"
						style="width: 230rpx; height: 300rpx;" />
				</u-col>
				<u-col span="8">
					<div>
						<h3>{{ commodity.name }}</h3>
					</div>
					<div>{{ commodity.describe }}</div>
					<div class="price">{{ commodity.price }} {{ commodity.unitPrice }}</div>
					<p style="font-size: 0.7em;"><svg t="1711104441686" class="icon" viewBox="0 0 1024 1024"
							version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5436" width="16" height="16">
							<path
								d="M737.371884 214.39681v-214.39681h-262.891326A436.961117 436.961117 0 0 0 37.519442 436.961117v583.976071H978.823529V399.696909z m-102.093718 704.44666H139.613161V436.961117A335.122632 335.122632 0 0 1 474.480558 102.093719h160.797608z m241.451645 0H741.710867V345.587238l136.039881 104.390828z"
								p-id="5437" fill="#707070"></path>
							<path
								d="M310.109671 573.000997h206.229312v102.093719h-206.229312zM310.109671 364.219342h206.229312v102.093719h-206.229312z"
								p-id="5438" fill="#707070"></path>
						</svg>{{ commodity.supplierName }}</p>
					<button @click="getById(commodity.id)">查看详情</button>
				</u-col>
			</u-row>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				token: null,
				//供应商列表
				supplierGroups: [],
				suppliers: [],
				imgSrcList: [{
						id: 1,
						url: '../../static/images/ls_festivity1.png'
					},
					{
						id: 2,
						url: '../../static/images/ls_festivity2.png'
					},
					{
						id: 3,
						url: '../../static/images/ls_festivity3.png'
					},
					{
						id: 4,
						url: '../../static/images/ls_festivity4.png'
					},
					{
						id: 5,
						url: '../../static/images/ls_festivity5.png'
					}
				],
				//商品列表
				commodityList: [],

			}
		},
		created() {
			//获取token在vue变量中
			this.recordToken();
			this.showWelcomeMessage();
			this.getAllSupplier();
			this.getPartOfCommodits();
		},
		methods: {
			goto(url) {
				uni.navigateTo({
					url: url
				})
			},
			
			/**
			 * @param {Object} id
			 */
			enteringStore(id){
				const url = "/pages/classification/classification?id=" + id;
				this.goto(url);
			},
			
			/**
			 * 根据id查询商品信息
			 */
			getById(id) {
				const url = "/pages/productDetails/productDetails?id=" + id;
				uni.navigateTo({
					url: url,
					animationType: 'pop-in',
					animationDuration: 300
				})
			},

			recordToken() {
				this.token = localStorage.getItem('token');
				console.log(this.token);
			},

			/**
			 * 欢迎光临
			 */
			showWelcomeMessage() {
				uni.showToast({
					title: '你好！',
					icon: 'success',
					duration: 2000
				});
			},
			/**
			 * 查询所有店铺
			 */
			getAllSupplier() {
				uni.request({
					url: 'http://localhost:8088/buyer-home/supplier',
					method: 'GET',
					header: {
						'content-type': 'application/json',
						'token': this.token
					},
					success: (res) => {
						this.suppliers = res.data.data;
						console.log(this.suppliers);
						this.supplierGroups = this.chunkArray(this.suppliers, 3);
						console.log(this.supplierGroups);
					},
					fail: (err) => {
						console.error('获取首页展示的商品列表请求失败：', err);
					}
				});
			},
			/**
			 * 分割数组为指定大小的子数组
			 */
			chunkArray(array, size) {
				const chunkedArray = [];
				for (let i = 0; i < array.length; i += size) {
					chunkedArray.push(array.slice(i, i + size));
				}
				return chunkedArray;
			},
			/**
			 * 获取首页展示的商品列表
			 */
			getPartOfCommodits() {
				uni.request({
					url: 'http://localhost:8088/buyer-home/commodity?number=3',
					method: 'GET',
					header: {
						'content-type': 'application/json',
						'token': this.token
					},
					success: (res) => {
						this.commodityList = res.data.data;
					},
					fail: (err) => {
						console.error('获取首页展示的商品列表请求失败：', err);
					}
				});
			}

		}
	}
</script>

<style lang="scss">
	.daily_recommendations {
		height: 80rpx;
		background-color: #fff;

		.recommendations {
			color: #ff5500;
			font-weight: bold;
			font-style: italic;
			font-size: 20px;
			text-align: center;
			line-height: 80rpx;
			background-color: #fff;
			height: 80rpx;
			width: 200rpx;
		}

		.right {
			position: relative;
			left: 600rpx;
			bottom: 80rpx;
			// background-color: pink;
			height: 80rpx;
			width: 150rpx;
			line-height: 80rpx;
			text-align: center;
			font-size: 12px;
			font-weight: bold;
		}
	}

	.logo {
		margin-top: 25rpx;
		margin-bottom: 25rpx;
		position: relative;
		height: 100rpx;

		.logo-image {
			width: 250rpx;
			position: absolute;
			top: 50%;
			/* 文字顶部距离容器顶部的距离为容器高度的一半 */
			left: 50%;
			/* 文字左侧距离容器左侧的距离为容器宽度的一半 */
			transform: translate(-50%, -50%);
			/* 通过负的50%偏移来实现垂直和水平居中 */
		}
	}

	.swiper-box {
		height: 300rpx;
		background-color: #fff;

		.swiper-image {
			width: 750rpx;
		}
	}

	.swiper {
		background-color: #fff;
		height: 250rpx;
		margin-bottom: 10rpx;

		.swiper-item {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			/* 上下间距均分 */
			height: 100%;
		}

		.group {
			display: flex;
			justify-content: space-between;
			/* 左右间距均分 */
		}

		.merchant-item {
			flex: 1;
			text-align: center;
		}

		.logo {
			width: 50px;
			/* 根据实际需要调整商家 logo 的尺寸 */
			height: 50px;
			margin-bottom: 10px;
			/* 根据实际需要调整商家 logo 和名称的间距 */
		}

		.merchant-info {
			display: flex;
			flex-direction: column;
			/* 垂直排列 */
			align-items: center;
			/* 居中对齐 */
			text-align: center;
			/* 文本居中 */
		}
	}

	.page {
		background-color: #EEEDEB;
		/* 设置页面背景颜色 */
	}

	.main-box {
		background-color: #fff;
		margin-bottom: 10rpx;
		// margin-top: 10rpx;
		// margin-left: 5rpx;
		// margin-right: 5rpx;
		// border-radius: 10px;
	}

	.price {
		color: red;
	}
</style>